<script setup>
import { ref, computed, onMounted } from 'vue';
import * as echarts from 'echarts';

// 时间范围筛选
const dateRange = ref(['2025-10-01', '2025-10-31']);

// 统计数据
const stats = ref({
  submittedLeadsCount: 10,
  closedLeadsCount: 20,
  newCycleContracts: {
    newContractCount: 30,
    orderAmount: 50,
  },
  oneTimeOrders: {
    orderCount: 100,
    orderAmount: 40,
  },
});

// 图表数据
const chartData = ref({
  submittedLeadsCount: [],
  closedLeadsCount: [],
  dates: [],
});

// 模拟数据填充
(function initData() {
  const dates = [];
  const submittedLeadsCount = [];
  const closedLeadsCount = [];
  for (let i = 1; i <= 31; i++) {
    dates.push(`2025-10-${i < 10 ? '0' + i : i}`);
    submittedLeadsCount.push(Math.round(Math.random() * 10));
    closedLeadsCount.push(Math.round(Math.random() * 5));
  }
  chartData.value = { dates, submittedLeadsCount, closedLeadsCount };
})();

// 表格数据
const tableData = ref([
  {
    ranking: 1,
    employee: '张三',
    performance: 50000,
    submittedLeads: 20,
    closedLeads: 15,
    newContracts: 5,
    newOrders: 3,
  },
]);

// 表格1数据
const tableData1 = ref([
  {
    department: "百账汇（广州）科技有限公司",
    totalSignAmount: 0,
    totalPerformanceAmount: 0,
    newSignContracts: {
      count: 0,
      amount: 0,
      performanceAmount: 0,
    },
    singleSign: {
      count: 0,
      amount: 0,
      performanceAmount: 0,
    },
    renewalContracts: {
      count: 0,
      amount: 0,
      performanceAmount: 0,
    },
  }
]);

// 表格2数据
const tableData2 = ref([
  {
    department: "百账汇（广州）科技有限公司",
    totalAssignedLeads: {
      leadCount: 0,
      transactionCount: 0,
      closingRate: "0%",
      contractAmount: 0,
      approvedRevenue: 0,
    },
    newlyAssignedLeads: {
      leadCount: 0,
      transactionCount: 0,
      closingRate: "0%",
      contractAmount: 0,
      approvedRevenue: 0,
    },
    existingLegacyLeads: {
      leadCount: 0,
      transactionCount: 0,
      closingRate: "0%",
      contractAmount: 0,
      approvedRevenue: 0,
    },
  }
]);

// 表格3数据
const tableData3 = ref([{
  ranking: 0,
  name: '小王',
  submit: 100,
  complete: 500,
  newContracts: 300,
  newOrders: 300
}]);

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('saleChart');
  if (!chartDom) return;
  const myChart = echarts.init(chartDom);
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['Submitted Leads', 'Closed Leads'],
      top: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: chartData.value.dates,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: 'Submitted Leads',
        type: 'line',
        data: chartData.value.submittedLeadsCount,
        itemStyle: { color: '#409EFF' },
      },
      {
        name: 'Closed Leads',
        type: 'line',
        data: chartData.value.closedLeadsCount,
        itemStyle: { color: '#F56C6C' },
      },
    ],
  });
};

onMounted(() => {
  initChart();
});
</script>

<template>
  <div class="sales">
    <!-- 时间筛选 -->
    <div class="filter-container">
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" class="class-1" />
      <el-checkbox v-model="stats.hideNoData">隐藏无数据的员工</el-checkbox>
      <a href="" class="class-2">报表逻辑说明</a>
    </div>

    <!-- 统计数据 -->
    <div class="stats-container">
      <div class="stat-item">
        <p>{{ stats.submittedLeadsCount }}</p>
        <p>提交线索数</p>
      </div>
      <div class="stat-item">
        <p>{{ stats.closedLeadsCount }}</p>
        <p>成交线索数</p>
      </div>
      <div class="stat-item">
        <p>新签周期合同</p>
        <p>新签合同数 {{ stats.newCycleContracts.newContractCount }}个</p>
        <p>签单金额 {{ stats.newCycleContracts.orderAmount }}元</p>
      </div>
      <div class="stat-item">
        <p>单次业务签单</p>
        <p>签单数 {{ stats.oneTimeOrders.orderCount }}个</p>
        <p>签单金额 {{ stats.oneTimeOrders.orderAmount }}元</p>
      </div>
    </div>

    <!-- 图表 -->
    <div class="chart-container">
      <div id="saleChart" style="width: 100%; height: 400px"></div>
    </div>

    <!-- 表格和标签页 -->
    <div class="table-container">
      <el-tabs type="border-card">
        <!-- 1号tab -->
        <el-tab-pane label="排行榜">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="ranking" label="排名" width="80" />
            <el-table-column prop="employee" label="员工" width="120" />
            <el-table-column prop="performance" label="业绩金额" sortable />
            <el-table-column prop="submittedLeads" label="提交线索数" sortable />
            <el-table-column prop="closedLeads" label="成交线索数" sortable />
            <el-table-column prop="newContracts" label="新签周期合同数" sortable />
            <el-table-column prop="newOrders" label="新签单次业务订单数" sortable />
          </el-table>
        </el-tab-pane>
        
        <!-- 2号tab -->
        <el-tab-pane label="签单统计">
          <el-table :data="tableData1" border style="width: 100%">
            <el-table-column prop="department" label="部门/员工" width="180" />
            <el-table-column prop="totalSignAmount" label="签单总金额（元）" width="120" />
            <el-table-column prop="totalPerformanceAmount" label="业绩总金额（元）" width="120" />
            <!-- 新签周期合同 -->
            <el-table-column label="新签周期合同">
              <el-table-column prop="newSignContracts.count" label="新签合同量" width="100" />
              <el-table-column prop="newSignContracts.amount" label="签单金额" width="100" />
              <el-table-column prop="newSignContracts.performanceAmount" label="业绩金额" width="100" />
            </el-table-column>
            <!-- 单次业务签单 -->
            <el-table-column label="单次业务签单">
              <el-table-column prop="singleSign.count" label="签单量" width="100" />
              <el-table-column prop="singleSign.amount" label="签单金额" width="100" />
              <el-table-column prop="singleSign.performanceAmount" label="业绩金额" width="100" />
            </el-table-column>
            <!-- 续签周期合同 -->
            <el-table-column label="续签周期合同">
              <el-table-column prop="renewalContracts.count" label="续签合同量" width="100" />
              <el-table-column prop="renewalContracts.amount" label="签单金额" width="100" />
              <el-table-column prop="renewalContracts.performanceAmount" label="业绩金额" width="100" />
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <!-- 3号tab -->
        <el-tab-pane label="线索成交统计">
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column prop="department" label="部门/员工" width="180" />

            <!-- 分配的全部线索 -->
            <el-table-column label="分配的全部线索">
              <el-table-column prop="totalAssignedLeads.leadCount" label="线索数" width="80" />
              <el-table-column prop="totalAssignedLeads.transactionCount" label="成交线索数" width="100" />
              <el-table-column prop="totalAssignedLeads.closingRate" label="成交率" width="80" />
              <el-table-column prop="totalAssignedLeads.contractAmount" label="签单金额" width="100" />
              <el-table-column prop="totalAssignedLeads.approvedRevenue" label="已审核收入" width="100" />
            </el-table-column>

            <!-- 新分配的线索 -->
            <el-table-column label="新分配的线索">
              <el-table-column prop="newlyAssignedLeads.leadCount" label="线索数" width="80" />
              <el-table-column prop="newlyAssignedLeads.transactionCount" label="成交线索数" width="100" />
              <el-table-column prop="newlyAssignedLeads.closingRate" label="成交率" width="80" />
              <el-table-column prop="newlyAssignedLeads.contractAmount" label="签单金额" width="100" />
              <el-table-column prop="newlyAssignedLeads.approvedRevenue" label="已审核收入" width="100" />
            </el-table-column>

            <!-- 存量的遗留线索 -->
            <el-table-column label="存量的遗留线索">
              <el-table-column prop="existingLegacyLeads.leadCount" label="线索数" width="80" />
              <el-table-column prop="existingLegacyLeads.transactionCount" label="成交线索数" width="100" />
              <el-table-column prop="existingLegacyLeads.closingRate" label="成交率" width="80" />
              <el-table-column prop="existingLegacyLeads.contractAmount" label="签单金额" width="100" />
              <el-table-column prop="existingLegacyLeads.approvedRevenue" label="已审核收入" width="100" />
            </el-table-column>
          </el-table>
        </el-tab-pane>
        
        <!-- 4号tab -->
        <el-tab-pane label="跟进阶段">跟进阶段</el-tab-pane>
        <el-tab-pane label="丢单分析">丢单分析</el-tab-pane>
        
        <!-- 来源分析 -->
        <el-tab-pane label="来源分析">
          <el-table :data="tableData3" border style="width: 100%">
            <el-table-column prop="ranking" label="排名" width="80" />
            <el-table-column prop="name" label="名称" width="120" />
            <el-table-column prop="submit" label="提交线索数" sortable />
            <el-table-column prop="complete" label="成交线索数" sortable />
            <el-table-column prop="newContracts" label="新签周期合同金额" sortable />
            <el-table-column prop="newOrders" label="单次业务订单金额" sortable />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
.sales {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(239, 239, 239);
  padding: 20px;
  box-sizing: border-box;
}

.filter-container {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  margin-bottom: 20px;

  .class-1 {
    margin-right: 20px
  }

  .class-2 {
    min-width:100px;
    margin-left: 900px;
  }
}

.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background-color: white;
  border-radius: 4px;
  margin-bottom: 20px;

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    p:first-child {
      font-size: 24px;
      font-weight: bold;
      color: #ff6b00;
      margin-bottom: 5px;
    }

    p {
      color: #666;
    }
  }
}

.chart-container {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.table-container {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
}
</style>